<template>
  <div id="app">
    <el-container>
      <el-header class="header" v-if="showHeader">
        <div class="header-content">
          <h1 class="logo">{{ t('common.platformName') }}</h1>
          <div class="nav-links">
            <router-link to="/" class="nav-link">{{ t('common.home') }}</router-link>
            <router-link to="/exchange" class="nav-link">{{ t('common.exchange') }}</router-link>
            <template v-if="!isAuthenticated">
              <router-link to="/login" class="nav-link">{{ t('common.login') }}</router-link>
              <router-link to="/register" class="nav-link">{{ t('common.register') }}</router-link>
            </template>
            <template v-else>
              <router-link to="/merchant" class="nav-link" v-if="userRole === 'MERCHANT'">{{ t('common.merchant') }}</router-link>
              <router-link to="/admin" class="nav-link" v-if="userRole === 'ADMIN'">{{ t('common.admin') }}</router-link>
              <el-button type="text" @click="logout" class="logout-btn">{{ t('common.logout') }}</el-button>
            </template>
            <!-- Language Switcher -->
            <div class="language-switcher">
              <el-dropdown @command="changeLanguage">
                <span class="el-dropdown-link">
                  {{ currentLang === 'en' ? t('common.language.english') : t('common.language.chinese') }}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="en">{{ t('common.language.english') }}</el-dropdown-item>
                    <el-dropdown-item command="zh">{{ t('common.language.chinese') }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="mobile-menu-btn" @click="toggleMobileMenu" v-if="isMobile">
            <el-icon><AppMenu /></el-icon>
          </div>
        </div>
        <div class="mobile-menu" :class="{ open: mobileMenuOpen }" v-if="isMobile">
          <router-link to="/" class="mobile-nav-link" @click="closeMobileMenu">{{ t('common.home') }}</router-link>
          <router-link to="/exchange" class="mobile-nav-link" @click="closeMobileMenu">{{ t('common.exchange') }}</router-link>
          <template v-if="!isAuthenticated">
            <router-link to="/login" class="mobile-nav-link" @click="closeMobileMenu">{{ t('common.login') }}</router-link>
            <router-link to="/register" class="mobile-nav-link" @click="closeMobileMenu">{{ t('common.register') }}</router-link>
          </template>
          <template v-else>
            <router-link to="/merchant" class="mobile-nav-link" @click="closeMobileMenu" v-if="userRole === 'MERCHANT'">{{ t('common.merchant') }}</router-link>
            <router-link to="/admin" class="mobile-nav-link" @click="closeMobileMenu" v-if="userRole === 'ADMIN'">{{ t('common.admin') }}</router-link>
            <el-button type="text" @click="logoutAndCloseMenu" class="mobile-logout-btn">{{ t('common.logout') }}</el-button>
          </template>
          <!-- Mobile Language Switcher -->
          <div class="mobile-language-switcher" v-if="isMobile">
            <el-dropdown @command="changeLanguage">
              <span class="el-dropdown-link">
                {{ currentLang === 'en' ? t('common.language.english') : t('common.language.chinese') }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="en">{{ t('common.language.english') }}</el-dropdown-item>
                  <el-dropdown-item command="zh">{{ t('common.language.chinese') }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      
      <el-main class="main-content">
        <router-view/>
      </el-main>
      
      <el-footer class="footer" v-if="showFooter">
        <p>{{ t('footer.copyright') }}</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { Menu as AppMenu, ArrowDown } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'

export default {
  name: 'App',
  components: {
    AppMenu,
    ArrowDown
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const { t, locale } = useI18n()
    const mobileMenuOpen = ref(false)
    const isMobile = ref(false)
    
    // Check if current route should show header/footer
    const showHeader = computed(() => {
      return !['/login', '/register'].includes(router.currentRoute.value.path)
    })
    
    const showFooter = computed(() => {
      return !['/login', '/register'].includes(router.currentRoute.value.path)
    })
    
    const isAuthenticated = computed(() => store.state.isAuthenticated)
    const userRole = computed(() => store.state.role)
    
    const checkMobile = () => {
      isMobile.value = window.innerWidth < 768
    }
    
    const toggleMobileMenu = () => {
      mobileMenuOpen.value = !mobileMenuOpen.value
    }
    
    const closeMobileMenu = () => {
      mobileMenuOpen.value = false
    }
    
    const logoutAndCloseMenu = () => {
      store.dispatch('logout')
      router.push('/login')
      closeMobileMenu()
    }
    
    const logout = () => {
      store.dispatch('logout')
      router.push('/login')
    }
    
    const currentLang = computed(() => locale.value)
    
    const changeLanguage = (lang) => {
      locale.value = lang
      localStorage.setItem('locale', lang)
    }
    
    onMounted(() => {
      checkMobile()
      window.addEventListener('resize', checkMobile)
      // Language is set in i18n config based on localStorage
    })
    
    onUnmounted(() => {
      window.removeEventListener('resize', checkMobile)
    })
    
    return {
      mobileMenuOpen,
      isMobile,
      showHeader,
      showFooter,
      isAuthenticated,
      userRole,
      toggleMobileMenu,
      closeMobileMenu,
      logoutAndCloseMenu,
      logout,
      AppMenu,
      ArrowDown,
      t,
      currentLang,
      changeLanguage
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
}

.logo {
  margin: 0;
  font-size: 1.5rem;
  color: #409EFF;
}

.nav-links {
  display: flex;
  align-items: center;
}

.nav-link {
  margin: 0 10px;
  text-decoration: none;
  color: #606266;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-link:hover, .nav-link.router-link-exact-active {
  background-color: #ecf5ff;
  color: #409EFF;
}

.logout-btn {
  margin-left: 10px;
}

.mobile-menu-btn {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 10px;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  position: absolute;
  top: 60px;
  right: 20px;
  min-width: 150px;
  border-radius: 4px;
  overflow: hidden;
}

.mobile-menu.open {
  display: flex;
}

.mobile-nav-link {
  padding: 12px 20px;
  text-decoration: none;
  color: #606266;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s;
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-link:hover {
  background-color: #ecf5ff;
  color: #409EFF;
}

.mobile-logout-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 12px 20px;
}

.language-switcher {
  margin-left: 20px;
}

.mobile-language-switcher {
  padding: 12px 20px;
  border-top: 1px solid #eee;
}

.main-content {
  padding: 20px 0;
}

.footer {
  background-color: #f5f5f5;
  text-align: center;
  padding: 20px;
  color: #606266;
}

/* Mobile styles */
@media (max-width: 767px) {
  .nav-links {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .header-content {
    padding: 0 10px;
  }
  
  .logo {
    font-size: 1.2rem;
  }
  
  .language-switcher {
    display: none;
  }
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-content {
    padding: 0 15px;
  }
}
</style>